import React from "react";
import ReactDOM from "react-dom";
export default class SetState2 extends React.Component{
  state = {
    count: 0
  }

  // count +1
  increment = () => {
    this.setState({count: this.state.count + 1})
    console.log('1.setState：', this.state.count)
    this.setState({count: this.state.count + 1})
    console.log('2.setState：', this.state.count)

    // 在setTimeOut，setInterval，addEventListen等回调里面，更新就是同步的；
    // 比如在一些事件处理函数之中，更新就是异步的
    // 在原生事件是同步的，在合成事件是异步的
    setTimeout(() => {
      
      // react17 稳定版 非并发模式
      // react17+ 开发版 并发模式 ReactDom.createRoot().render()
      // 这里setTimeOut中，setState是同步的，但是想让他异步的话需要通过unstable_batchedUpdates函数强制异步，实现批量更新
      ReactDOM.unstable_batchedUpdates(() => {
        // ......
      })

      // 会先执行一次上面的setState完事之后count为1所以下面这个count为2
      this.setState({count: this.state.count + 1})
      console.log('1.setTimtOut_setState：', this.state.count)
      // 上面的count是2所以下面的是3
      this.setState({count: this.state.count + 1})
      console.log('2.setTimtOut_setState：', this.state.count)
    }, 0)
    // 1.setState： 0
    // 2.setState： 0
    // render的count: 1
    // render的count: 2
    // 1.setTimtOut_setState： 2
    // render的count: 3
    // 2.setTimtOut_setState： 3
  }

  // count +1 三次
  triple = () => {
    console.log('triple setState前的count', this.state.count)
    this.setState({
      count: this.state.count + 1
    });
    this.setState({
      count: this.state.count + 2
    });
    this.setState({
      count: this.state.count + 3
    });
    console.log('triple setState后的count', this.state.count)
  }

  // count - 1
  reduce = () => {
    setTimeout(() => {
      console.log('reduce setState前的count', this.state.count)
      this.setState({
        count: this.state.count - 1
      });
      console.log('reduce setState后的count', this.state.count)
    }, 0);
  }
  render(){
    console.log('render的count:', this.state.count)
    return <div style={{marginTop: '210px'}}>
      <button style={{marginRight: '20px'}} onClick={this.increment}> +1 </button>
      <button style={{marginRight: '20px'}} onClick={this.triple}> +1 三次 </button>
      <button onClick={this.reduce}> -1 </button>
    </div>
  }
}